
<template>
  <view class="page-container">
    <!-- 顶部 KV 图 -->
    <image class="kv-img" src="https://scoringchina.oss-cn-beijing.aliyuncs.com/biemlfGolf/kkk.jpg" mode="widthFix"></image>
    <!-- 动态模块 -->
    <swiper class="dynamic-section" v-if="newsList.length > 0"  autoplay interval="3000"  >
      <swiper-item v-for="(item, index) in newsList" :key="item.id" >
        <view class="dynamic-item" @click="goDynamic(item)">
             <image class="dynamic-img" :src="item.thumb" mode="widthFix"></image>
        <view class="dynamic-desc">{{item.title}}</view>
        </view>
     
      </swiper-item>
    </swiper>
    <!-- 固定分组 -->
    <view class="group-section">
      <view class="group-card ab" @click="goGroup('AB组')">
        <image class="group-img" src="https://scoringchina.oss-cn-beijing.aliyuncs.com/biemlfGolf/ABZ.png" ></image>
      </view>
      <view class="group-card cd" @click="goGroup('CD组')">
        <image class="group-img" src="https://scoringchina.oss-cn-beijing.aliyuncs.com/biemlfGolf/CDZ.png" ></image>
      </view>
    </view>
  </view>
</template>

<script>
import { loadWeChatSDK } from '@/static/wechat.js'; 
export default {
  data() {
    return {
      newsList: [],
      appId: "wxbdf2f66a398d7a34",
      timestamp: 1712131234,
      nonceStr: "randomString123",
      signature: "abcdef123456signature"
    }
  },
  onLoad() {
    this.fetchNews();
 
    this.initWeChatShare1();
  },
  methods: {
     async initWeChatShare1() {
      try {
        const wxJsSdk = await loadWeChatSDK();
    
        console.log('----wxJsSdk-----------',jWeixin)
        // 请求后端签名数据
        const res = await uni.request({
          url: 'http://chaoxiang.scoringchina.com/index/api/getwxjsapi',
          method: 'POST',
          data: { url: location.href.split('#')[0] }
        });
      console.log('res----',res.data.data)
      const { app_id, timestamp, noncestr, signature } = res.data.data;

        jWeixin.config({
          debug: false,
          appId:app_id,
          timestamp,
          nonceStr:noncestr,
          signature,
          jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData']
        }
        );

        jWeixin.ready(() => {
        console.log('jWeixin ready')
         const shareData = {
           title: '2025比音勒芬第三十一届全国青少年高尔夫球锦标赛1',
           desc: '赛事精彩呈现，欢迎查看！',
           link: currentUrl,
           imgUrl: 'https://scoringchina.oss-cn-beijing.aliyuncs.com/biemlfGolf/kvv.png',
           success: () => {
             console.log('微信分享配置成功');
           }
         };
       
         // 分享给朋友
         jWeixin.updateAppMessageShareData(shareData);
       
         // 分享到朋友圈（desc 不生效，用 title）
         jWeixin.updateTimelineShareData({
           title: shareData.title,
           link: shareData.link,
           imgUrl: shareData.imgUrl,
           success: () => {
             console.log('朋友圈分享配置成功');
           }
         });
       });

        jWeixin.error(err => {
          console.error('jWeixin.config 错误:', err);
        });
      } catch (err) {
        console.error('微信分享配置失败:', err);
      }
    },
    async fetchNews() {
      try {
        const res = await uni.request({
          url: 'http://chaoxiang.scoringchina.com/index/api/news',
          method: 'GET'
        });
        if(res && res.data && res.data.code === 1) {
          this.newsList = res.data.data;
        } else {
          console.error('获取新闻数据失败', res[1]);
        }
      } catch (error) {
        console.error('请求异常', error);
      }
    },
    goGroup(type) {
      uni.navigateTo({
        url: `/pages/home/index?group=${type}`
      })
    },
    goDynamic(item) {
      console.log('--------2-----------',item);
   
                  window.open(item.link_url);

    }
  }
}
</script>

<style>
.page-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #f7f7f7;
  min-height: 100vh;
  width: 100vw;
}
.kv-img {
  width: 100vw;
  height: 320rpx;
  object-fit: cover;
  margin-bottom: 24rpx;
}
.dynamic-section {
  height: 300rpx;
  width: 94vw;
  border-radius: 24rpx;
  box-shadow: 0 4rpx 24rpx rgba(0,0,0,0.06);
  margin-bottom: 24rpx;
  position: relative;
  box-sizing: border-box;
  text-align: center;
}
.dynamic-img {
  width: 100%;
  height: 291rpx;
  border-radius: 24rpx;
}
.dynamic-desc {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 50rpx;
  line-height: 50rpx;
  background: rgba(0, 0, 0, 0.54);
  color: white;
  border-radius: 0 0 24rpx 24rpx;
  padding-left: 10rpx;
  box-sizing: border-box;
}
.group-section {
  width: 94vw;
  display: flex;
  flex-direction: column;
  gap: 24rpx;
  margin-bottom: 200rpx;
}
.group-card {
  position: relative;
  border-radius: 20rpx;
  height: 300rpx;
  display: flex;
  align-items: flex-end;
}
.group-img {
  width: 100%;
  height: 300rpx;
  object-fit: cover;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  border-radius: 20rpx;
}
</style>
